<template>
  <div class="oneMap map-box" id="oneMap">
    <!-- 地图 -->
    <div style="width: 100%; height: 100%; position: absolute"></div>

    <!-- 左侧面板 -->
    <div
      class="leftPanel"
      :class="{ hidePanel: !leftPanelShow }"
      v-show="componentsID"
    >
      <!-- 面板内容 -->
      <div class="map_leftPanel" v-if="!SubPage">
        <!-- 面板显隐以及切换按钮 -->
        <div class="toggle">
          <div class="toggle-btn" @click="leftPanelShow = !leftPanelShow">
            <img
              src="@/assets/map/img/l_ss1.png"
              alt=""
              v-show="leftPanelShow"
            />
            <img
              src="@/assets/map/img/l_ss2.png"
              alt=""
              v-show="!leftPanelShow"
            />
          </div>
          <div
            class="toggleItem"
            v-show="item.value"
            v-for="(item, index) in toggleList"
            :key="index"
            :class="componentsID == item.id ? 'active' : ''"
            @click="checkPanel(item.id)"
          >
            <img
              src="@/assets/map/img/close3.png"
              @click.stop="closePanel(item.id, index)"
            />
            <div class="toggle-name">{{ item.name }}</div>
          </div>
        </div>
        <transition name="el-fade-in-linear" mode="out-in">
          <keep-alive>
            <component
              :is="componentsID"
              :emap="emap"
              @addList="openPopup"
              @goSubPage="goSubPage"
            >
            </component>
          </keep-alive>
        </transition>
      </div>
      <!-- 点击行间的二级详情页展示 -->
      <!-- @dialogShow="dialogShow" @taskCheck="taskCheck" -->
      <div class="SubPage_details" v-if="SubPage">
        <transition name="el-fade-in-linear" mode="out-in">
          <component
            :is="subID"
            :subdata="subdata"
            @goback="goback"
            :subtime="subtime"
            @showDiog="openPopup"
          >
          </component>
        </transition>
      </div>
    </div>

    <!-- 公共弹出层（el-dialog 实现，支持切换组件） -->
    <el-dialog
      :visible.sync="popupVisible"
      :title="currentPopupTitle"
      :width="popupWidth"
      :append-to-body="true"
      :close-on-click-modal="false"
      :show-close="true"
      @close="handleDialogClose"
    >
      <!-- 弹出层内容（可切换组件） -->
      <transition name="el-fade-in-linear" mode="out-in">
        <keep-alive>
          <component
            :is="currentPopupComponent"
            :emap="emap"
            :popup-data="popupData"
            @confirm="handlePopupConfirm"
            @cancel="popupVisible = false"
          ></component>
        </keep-alive>
      </transition>

      <!-- 弹出层底部按钮（可选，也可让子组件自定义按钮） -->
      <!-- <template #footer>
        <div class="dialog-footer" v-if="showFooterBtn">
          <el-button @click="popupVisible = false">取消</el-button>
          <el-button type="primary" @click="handlePopupConfirm">确定</el-button>
        </div>
      </template> -->
    </el-dialog>
  </div>
</template>

<script>
import { getToken } from "@/utils/auth";
import { Message } from "element-ui"; // 引入Element UI的消息提示

export default {
  name: "OneMap",
  provide() {
    return {
      theme: () => this.appTheme,
    };
  },
  components: {
    Overview: () => import("./components/Overview"), //综合概览
    EventAlert: () => import("./components/EventAlert"), //事件预警新增弹出层
    EventAlertDiog: () => import("./components/EventAlert/addDiog"), //事件预警新增弹出层
    EventAlert_Sub: () => import("./components/EventAlert_Sub"), //子级页面项
    // 应急事件
    EmergencyEvent: () => import("./components/EventAlert/addDiog"),

    // 现场甄别
    xczb: () => import("./components/sjclDiogs/xczb"),
    // 危化品查看
    whpck: () => import("./components/sjclDiogs/whpck"),
    // 报告结果
    bgjg: () => import("./components/sjclDiogs/bgjg"),
    // 预案启动
    yaqd: () => import("./components/sjclDiogs/yaqd"),
    // 预案查询
    yacx: () => import("./components/sjclDiogs/yacx"),
    // 人员调度
    rydd: () => import("./components/sjclDiogs/rydd"),
    // 物资调度
    wzdd: () => import("./components/sjclDiogs/wzdd"),
    // 车辆调度
    cldd: () => import("./components/sjclDiogs/cldd"),
    // 监测布点
    jcbd: () => import("./components/sjclDiogs/jcbd"),
    // 气象监测
    qxjc: () => import("./components/sjclDiogs/qxjc"),
    // 数据上传
    sjsc: () => import("./components/sjclDiogs/sjsc"),
    // 数据分析
    DataAnalysis: () => import("./components/sjclDiogs/sjfx"),
    // 事件等级评估
    sjdjpg: () => import("./components/sjclDiogs/sjdjpg"),
    // 报告列表
    ReportList: () => import("./components/sjclDiogs/bglb"),
    // 事件终止
    sjzz: () => import("./components/sjclDiogs/sjzz"),
    // 损害损失上传
    LossDamageUpload: () => import("./components/sjclDiogs/shsjsc"), //损害损失上传
  },
  data() {
    return {
      componentsID: "Overview",
      leftPanelShow: true,
      toggleList: [
        { id: "Overview", name: "综合概览", value: true },
        { id: "EventAlert", name: "事件预警", value: true },
      ],
      emap: null,

      // 公共弹出层配置（el-dialog）
      popupVisible: false, // 弹窗显示状态
      currentPopupComponent: "", // 当前显示的弹窗组件ID
      currentPopupTitle: "", // 弹窗标题
      popupData: {}, // 传递给弹窗组件的参数
      popupWidth: "60%", // 弹窗宽度（可动态调整）
      showFooterBtn: true, // 是否显示底部默认按钮（子组件可自定义时设为false）

      // 弹窗组件列表（统一配置，便于管理）
      popupComponents: [
        {
          id: "EventAlertDiog",
          name: "新增",
          width: "60%",
          showFooter: false,
        }, // 表单组件自带按钮，隐藏默认底部
        {
          id: "EmergencyEvent",
          name: "应急事件",
          width: "60%",
          showFooter: false,
        },
        {
          id: "xczb",
          name: "现场甄别",
          width: "80%",
          showFooter: false,
        }, // 详情组件无需底部按钮
        // { id: "whpck", name: "危化品查看", width: "50%", showFooter: true }, // 使用默认底部按钮
        { id: "whpck", name: "危化品查看", width: "50%" },
        { id: "bgjg", name: "报告结果", width: "50%" },
        { id: "yaqd", name: "预案启动", width: "50%" },
        { id: "yacx", name: "预案查询", width: "80%" },
        { id: "rydd", name: "人员调度", width: "80%" },
        { id: "wzdd", name: "物资调度", width: "80%" },
        { id: "cldd", name: "车辆调度", width: "80%" },
        { id: "jcbd", name: "监测布点", width: "80%" },
        { id: "qxjc", name: "气象监测", width: "80%" },
        { id: "sjsc", name: "数据上传", width: "80%" },
        { id: "DataAnalysis", name: "数据分析", width: "80%" },
        { id: "sjdjpg", name: "事件等级评估", width: "80%" },
        { id: "ReportList", name: "报告列表", width: "80%" },
        { id: "sjzz", name: "事件终止", width: "80%" },
        { id: "LossDamageUpload", name: "损害损失上传", width: "80%" },
      ],
      // 二级弹出层的统一配置
      SubPage: false, //是否显示
      subID: "", //详情显示的组件项
      subdata: {}, //详情数据
      subtime: "", //详情时间
    };
  },
  mounted() {
    sessionStorage.setItem("tk", getToken()); // 更新e制图token
  },
  methods: {
    checkPanel(item) {
      this.leftPanelShow = true;
      this.componentsID = item;
    },

    closePanel(item, index) {
      this.toggleList[index].value = false;
    },

    // 左侧面板点击查看详情
    goSubPage(id, e) {
      console.log(">>>查看详情啊", id, e);
      this.SubPage = true;
      this.subID = id;
    },

    // 二级页面返回一级页面
    goback(e) {
      this.SubPage = false;
    },
    /**
     * 打开弹窗（外部组件调用时触发）
     * @param {String} componentId - 弹窗组件ID（对应popupComponents中的id）
     * @param {Object} data - 传递给弹窗的参数（可选，如编辑数据）
     */
    openPopup(componentId, data = {}) {
      // 验证组件是否在配置列表中
      const target = this.popupComponents.find(
        (item) => item.id === componentId
      );
      if (!target) {
        Message.error(`弹窗组件【${componentId}】未配置`);
        return;
      }

      // 配置弹窗参数
      this.currentPopupComponent = componentId;
      this.currentPopupTitle = target.name;
      this.popupWidth = target.width;
      this.showFooterBtn = target.showFooter;
      this.popupData = data; // 传递参数（如：编辑时的初始数据）
      this.popupVisible = true;
    },

    /**
     * 处理弹窗确认事件
     * @param {Object} result - 子组件返回的结果数据（可选）
     */
    handlePopupConfirm(result) {
      console.log("弹窗确认，返回数据：", result || this.popupData);
      // 这里可处理提交逻辑（如接口请求、数据刷新等）
      Message.success("操作成功！");
      this.popupVisible = false;

      // 重置弹窗状态（避免下次打开残留数据）
      setTimeout(() => {
        this.popupData = {};
      }, 300);
    },

    /**
     * 弹窗关闭时的回调（重置状态）
     */
    handleDialogClose() {
      // 可选：重置弹窗数据（根据需求决定是否保留）
      this.popupData = {};
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./css/listcommon.scss";
@import "./css/leftPanel.scss";
@import "./css/layers.scss";

// 筛选条件
.oneMap {
  height: 100%;
  overflow: hidden;

  /* 过渡动画 */
  .fade-enter-active,
  .fade-leave-active {
    transition: opacity 0.5s;
  }

  .fade-enter,
  .fade-leave-to {
    opacity: 0;
  }
}

// 左侧面板边框优化
.leftPanel {
  border-right: 1px solid #e5e7eb;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.03);
}

// 切换按钮区域优化
.toggle {
  // border-right: 1px solid #e5e7eb;

  .toggleItem {
    position: relative;
    border-bottom: 1px solid #f3f4f6;

    // 删除按钮优化
    img {
      position: absolute;
      top: 50%;
      right: 5px;
      transform: translateY(-50%);
      width: 16px;
      height: 16px;
      opacity: 0;
      visibility: hidden;
      transition: all 0.2s ease;
      padding: 2px;
      border-radius: 4px;
      background-color: rgba(248, 250, 252, 0.8);

      &:hover {
        background-color: #f8fafc;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
      }
    }

    // 悬浮显示删除按钮
    &:hover img {
      opacity: 1;
      visibility: visible;
      right: 8px;
    }

    // 激活状态样式优化
    &.active {
      border-left: 3px solid #307efe;
      background-color: #f0f7ff;
    }
  }

  .toggle-btn {
    border-bottom: 1px solid #e5e7eb;
    transition: background-color 0.2s;

    &:hover {
      background-color: #f9fafb;
    }
  }
}

// 面板内容区域边框优化
.map_leftPanel {
  border: none;

  > div {
    border-radius: 6px;
    padding: 8px;
  }
}

// 分析下拉
.spatial-analysis {
  width: 300px;
  height: 200px;
  padding: 10px;
  font-size: 16px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #333;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);

  img {
    margin-right: 10px;
    width: 16px;
    height: 16px;
  }

  span {
    cursor: pointer;
  }

  .tool-analysis {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 15px 0;

    div {
      width: 50%;
    }
  }

  .data-analysis {
    padding: 10px 0;

    div {
      padding: 5px 0;
    }
  }

  .analysis-title {
    background: linear-gradient(
      90deg,
      #307efe 0%,
      #307efe 0.5%,
      rgba(48, 126, 254, 0.1) 0.6%,
      rgba(48, 126, 254, 0) 90%
    );
    font-size: 16px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #307efe;
    line-height: 26px;
    padding-left: 10px;
    border-radius: 4px;
  }
}

// 自定义弹窗内容样式（可选，根据子组件需求调整）
::v-deep .el-dialog__body {
  padding: 20px;
  max-height: 70vh;
  overflow-y: auto; // 内容超出时滚动
}

// 滚动条优化
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: #f9fafb;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 3px;

  &:hover {
    background: #9ca3af;
  }
}

.section-list {
  &::-webkit-scrollbar {
    width: 0px;
  }
}

// 二级详情页边框优化
.SubPage_details {
  border-top: 1px solid #e5e7eb;
}
</style>
